<template>
	<view :style="{height:height+'px'}" >
		<swiper :indicator-dots="true" :current="current" :autoplay="false" :duration="300"
			:style="{'height':height+'px'}" @change="changeIndex" easing-function="easeInOutCubic">
			<view v-if="items.length">
				<swiper-item v-for="(item,index) in items" :key="index">
					<scroll-view scroll-y="true" :style="{'height':height+'px'}"  @scrolltolower="scrolltolower" :lower-threshold="70">
						<slot :name="'scope'+index" :data="item"></slot>
					</scroll-view>
				</swiper-item>
			</view>
			<view v-else>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':height+'px'}" @scrolltolower="scrolltolower" :lower-threshold="70">
						<slot :name="'scope'+SlotId"></slot>
					</scroll-view>
				</swiper-item>
			</view>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			SlotId:{
				type:String,
				default:'SlotId'
			},
			difference:{
				type:Number,
				default: 57
			},
			current:{
				type:Number,
				default:0
			},
			items:{
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				height: (uni.getSystemInfoSync().windowHeight || 0) - this.difference,
			};
		},
		computed: {
			
		},
		onLoad() {
			let that = this
		},
		methods:{
			scrolltolower(){
				this.$emit('scrolltolower')
			},
			// 滑动选项卡触发
			changeIndex(e) {
				this.tabsEvent(e.detail.current)
			},
			tabsEvent(index) {
				this.$emit('changeSwiperIndex',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	

</style>
